// 创建一个路由器并暴露出去

// 1. 引入createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个一个可能要展示的组件
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'
import Detail from '@/views/Detail.vue'


// 2. 创建路由器
const router = createRouter({
    // 路由器的工作模式
    history: createWebHistory(),
    // 路由规则
    routes: [
        {
            // 重定向
            path:'/',
            redirect:'/home'
        },
        {
            name: 'homeName',
            path: '/home',
            component: Home
        },
        {
            name: 'newsName',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'detailName',
                    // 动态路由，?表示可选参数
                    path: 'detail/:id/:title/:content?',
                    component: Detail,
                    // 第一种写法：将路由收到的所有params参数映射到组件的props中
                    // props: true,
                    // 第二种写法：函数写法，可以自己决定将什么作为props传给组件(可以query，也可以params，也可以自己写一个对象)
                    props(route){
                      return route.params
                    },
                    // 第三种写法：对象写法，可以自己决定将什么作为props传给组件
                    // props: {
                    //     a: '哈哈',
                    //     b: '呵呵'
                    // }
                }
            ]
        },
        {
            name: 'aboutName',
            path: '/about',
            component: About
        }
    ]
})

// 3. 暴露路由器
export default router